<template>
    <div class="w-[360px] h-full bg-page rounded-lg flex justify-center">
        <el-scrollbar v-if="currentMusic.id">
            <div class="p-[40px] flex flex-col items-center">
                <img
                    :src="currentMusic.cover_url"
                    class="w-[200px] h-[200px] rounded-[12px]"
                    alt=""
                />

                <div class="text-2xl font-bold mt-[30px]">
                    {{ currentMusic.title }}
                </div>

                <div
                    v-if="currentMusic.tags"
                    class="text-tx-secondary mt-[5px]"
                >
                    {{ currentMusic?.tags }}
                </div>

                <div
                    v-if="currentMusic.lyric"
                    class="whitespace-pre-wrap text-center mt-[20px] leading-7"
                >
                    {{ currentMusic?.lyric }}
                </div>

                <div
                    v-if="!currentMusic.lyric"
                    class="mt-[30px] text-tx-secondary"
                >
                    歌曲无歌词
                </div>
            </div>
        </el-scrollbar>

        <div v-else class="h-full flex flex-col items-center justify-center">
            <div class="text-tx-secondary">
                <icon :size="45" name="svg-icon-Music" />
            </div>
            <div class="my-[10px] text-tx-secondary">
                当前还没有选中音乐哦
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMusicPlay } from '../hooks/useMusicPlay'

const { currentMusic } = useMusicPlay()
</script>
